<template>
  <div class="activity-details">
    <div class="activity-info">
      <div class="info-item">
        <strong>活动内容：</strong>{{ this.activities.activityContent }}
      </div>
      <div class="info-item">
        <strong>活动开始时间：</strong>{{ this.activities.activityTime }}
      </div>
      <div class="info-item">
        <strong>发起人：</strong>{{ this.activities.activityPerson }}
      </div>
      <div class="info-item">
        <strong>已报名/需要人数：</strong>{{ this.enrolledCount }}/{{ this.activities.studentNum }}
      </div>
      <div class="info-item">
        <strong>报名时间：</strong>{{ this.activities.enterStartTime }} - {{this.activities.enterEndTime}}
      </div>
    </div>
    <el-tag size="large" v-if="this.activities.state==='0'">报名未开始</el-tag>
    <el-tag size="large" v-if="this.activities.state==='2'">报名已结束</el-tag>
    <el-tag style="width: 50%" v-if="this.activities.state==='1' && this.enrolledCount>=this.activities.studentNum"
            size="large">人数已满
    </el-tag>
      <button
          v-else-if="this.activities.state==='1' && this.enrolledCount<this.activities.studentNum"
              :class="{ 'register-button': !isRegistered, 'cancel-button': isRegistered, 'disabled-button': isLock }"
              @click="toggleRegistration">
          {{ isLock ? `(${countdown}s)` : (isRegistered ? '取消报名' : '点击报名') }}
      </button>
  </div>

  <div style="margin-top: 50px;">
    <h2 style="text-align: center">参与人员</h2>
    <table>
      <thead>
      <tr>
        <th data-campo='姓名'>姓名</th>
        <th data-campo='班级'>班级</th>
        <th data-campo='学号'>学号</th>
        <th data-campo='手机号'>手机号</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(reminder, index) in reminders" :key="index">
        <td data-campo='姓名'>{{ reminder.studentName }}</td>
        <td data-campo='班级'>{{ reminder.studentClass }}</td>
        <td data-campo='学号'>{{ reminder.accountNo }}</td>
        <td data-campo='手机号'>{{ reminder.tel }}</td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import request from "@/util/request.js";

export default {
    data() {
        return {
          reminders: [],  // 报名人员
            isRegistered: false, // 初始状态为未报名
            activities: {},
            enter:{},
            enrolledCount: 0,// 初始化 记录已经报名的人数
            isLock:false,      // 放重复点击
            countdown: 0, // 倒计时秒数
        };
    },

    created() {
        this.getactivContent(this.$route.query.id); // 获取新闻详细内容

    },

    methods: {
        getactivContent(id) {
          request.get("/info_activity/getById?id=" + id).then(res => {
                this.activities = res.data.data;
              this.getStudent();// 获取已报名人员
                this.fetchEnrolledCount(this.activities); // 获取已报名人数
            });
        },
        startCountdown() {
            this.countdown = 30; // 设置倒计时为30秒

            const countdownInterval = setInterval(() => {
                if (this.countdown > 0) {
                    this.countdown--;
                } else {
                    clearInterval(countdownInterval); // 清除倒计时
                    this.isLock = !this.isLock; // 启用按钮
                }
            }, 1000);
        },
        async toggleRegistration() {
            try {
                if (!this.isLock) {
                    this.isLock = true; // 禁用按钮
                    if (this.isRegistered) {
                        const response = await request.get(`/info_activity_massage/delete?accountNo=${JSON.parse(localStorage.getItem('user')).accountNo}&activityNo=${this.activities.activityNo}`)
                            .then(res => {
                              if (res.data.code === '200') {
                                this.startCountdown(); // 启动倒计
                                // 更新已报名状态为 false
                                this.isRegistered = false;
                                // 更新已报名人数（如果需要）
                                this.enrolledCount -= 1;
                                this.getStudent();// 获取已报名人员
                                this.$message({
                                  type: 'success',
                                  message: '取消报名成功!'
                                });
                              }
                            })
                    } else {
                        // 处理报名逻辑
                        this.enter.activityNo=this.activities.activityNo
                        this.enter.accountNo=JSON.parse(localStorage.getItem('user')).accountNo
                        // 发送 POST 请求来报名
                        const response = await request.post(`/info_activity_massage/edit`, this.enter)
                            .then(res => {
                              if (res.data.code === '200') {
                                this.startCountdown(); // 启动倒计
                                // 更新已报名状态为 true
                                this.isRegistered = true;
                                // 更新已报名人数
                                this.enrolledCount += 1;
                                // 如果需要，获取已报名学生的信息
                                this.getStudent();// 获取已报名人员
                                this.$message({
                                  type: 'success',
                                  message: '报名成功!'
                                });
                              } else {
                                this.$message({
                                  type: 'error',
                                  message: '人数已满!'
                                });
                              }
                            })
                    }
                }
            } catch (error) {
            }
        },
      fetchEnrolledCount(activity) {
            try {
              request.get(`/info_activity_massage/isSign?activityNo=${activity.activityNo}&accountNo=${JSON.parse(localStorage.getItem('user')).accountNo}`).then(isSignedResponse => {
                this.isRegistered = isSignedResponse.data.data;
              })
              request.get(`/info_activity_massage/getCount?activityNo=${activity.activityNo}`).then(response => {
                this.enrolledCount = response.data.data;
              })
            } catch (error) {
            }
      },
      getStudent() {
        request.get("/info_activity_massage/getOneActivityStudentMassage?activityNo=" + this.activities.activityNo).then(res => {
          this.reminders = res.data.data
        })
      }
    }
};
</script>

<style scoped>
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:300);
* { margin: 0; padding: 0; border: 0 none; position: relative; }
*, *:before, *:after { box-sizing: inherit; }
html {
  box-sizing: border-box;
  background: #0D757D;
  font-size: 1rem;
  color: #e6eff0;
  font-family: Roboto Slab;
}
h1 {
  font-weight: normal;
  font-variant: small-caps;
  text-align: center;
}
table {
  --bg: linear-gradient(45deg, #87CEFA 0%, #C0F0F1 20%, #A0E2EF 39%, #68B5EB 76%, #7CACD2 100%);
  background: var(--bg);
  table-layout: fixed;
  margin: 1rem auto;
  width: 50%;
  box-shadow: 0 0 4px 2px rgba(0,0,0,.4);
  border-collapse: collapse;
  border: 1px solid rgba(0,0,0,.5);
  border-top: 0 none;
  /* 添加滚动条样式 */
  scrollbar-color: rgba(147, 242, 243, 0.71) transparent;
}

table::-webkit-scrollbar {
  width: 20px;
}
table::-webkit-scrollbar-track {
  background: transparent; /* 设置滚动条轨道背景色 */
}
table::-webkit-scrollbar-thumb {
  background-color: rgba(147, 242, 243, 0.71);
  border-radius: 7px;
  border: 1px solid #aaa;
}

thead {
  --bg: linear-gradient(-45deg, #F7F1FF 0%, #E7FFEC 20%, #D1F9E7 39%, #BCD2E7 76%, #B8D0E5 100%);
  background: var(--bg);
  text-align: center;
  z-index: 2;
}

thead tr {
  padding-right: 17px;
  box-shadow: 0 4px 6px rgba(0,0,0,.6);
  z-index: 2;
}

th {
  border-right: 2px solid rgba(0,0,0,.2);
  padding: .7rem 0;
  font-size: 1.3rem;
  font-weight: normal;
  font-variant: small-caps;
  text-align: center;
}

tbody {
  display: block;
  height: calc(36vh - 1px);
  min-height: calc(200px + 1px);
  overflow-y: scroll;
  color: #000;
}

tr {
  display: block;
  overflow: hidden;
}

tbody tr:nth-child(odd) {
  background: rgba(0,0,0,.2);
}

th, td {
  width:25%;
  float: left;
  text-align: center;
}

td {

  padding: .5rem 0;
  border-right: 2px solid rgba(0,0,0,.2);
}

td:nth-child(2n) { color: #fff; }


@media (min-width: 1024px) {
  .activity-details {
    text-align: center;
    margin: 0 auto;
    max-width: 50%;
  }

}


@media only screen and (max-width: 1024px) {
  table {
    border-top: 1px solid ;
    width: 98%;

  }
  .activity-info{
    width: 100%;
    max-width: 100%;
  }
  .activity-details {
    text-align: center;
    margin: 0 auto;
    max-width: 100%;
  }
  thead {display: none;}
  tbody {
    height: auto;
    max-height: 55vh;
  }
  tr {
    border-bottom: 2px solid rgba(0,0,0,.35);
  }
  tbody tr:nth-child(odd) {
    --bg: linear-gradient(-45deg, #F7F1FF 0%, #E7FFEC 20%, #D1F9E7 39%, #BCD2E7 76%, #B8D0E5 100%);
    background: var(--bg);
  }
  tbody tr:nth-child(even) {
    --bg: linear-gradient(45deg, #87CEFA 0%, #C0F0F1 20%, #A0E2EF 39%, #68B5EB 76%, #7CACD2 100%);
    background: var(--bg);
  }
  td {
    display: block;
    width: 100%;
    min-width: 100%;
    padding: .4rem .5rem .4rem 30%;
    border-right: 0 none;
  }
  td:before {
    content: attr(data-campo);
    background: rgba(0,0,0,.1);
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: auto;
    min-width: 30%;
    font-family: monospace;
    text-align: center;
    font-size: 150%;
    font-variant: small-caps;
    line-height: 1.8;
  }
  tbody td:last-child {
    padding-left: 30%;
  }
  td:nth-child(even) {
    background: rgba(0,0,0,.2);
  }
}
a {color: #FF7361}

.activity-details {
  text-align: center;
  margin: 0 auto;
  max-width: 50%;
  padding: 20px; /* 添加内边距 */
  border-radius: 10px; /* 添加圆角 */
  --bg: linear-gradient(45deg, #87CEFA 0%, #C0F0F1 20%, #A0E2EF 39%, #68B5EB 76%, #7CACD2 100%);
  background: var(--bg);
}

.activity-details h2 {
  margin-bottom: 20px;
  color: #333; /* 修改标题颜色 */
  font-size: 28px; /* 修改标题字体大小 */
}

.activity-info {
  margin-bottom: 30px;


}

.info-item {
  margin-bottom: 10px;
  text-align: left; /* 修改文本对齐方式 */
}

.info-item strong {
  font-weight: bold; /* 加粗文本 */
}

.register-button,
.cancel-button {
  padding: 10px 20px;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-size: 16px; /* 修改按钮字体大小 */
}

.register-button {
  background-color: #3498db;
}

.register-button:hover {
  background-color: #2980b9;
}

.cancel-button {
  background-color: #e74c3c; /* 红色背景色 */
}

.cancel-button:hover {
  background-color: #c0392b; /* 深红色背景色 */
}
</style>
